<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <div class="search">
          <el-input
              v-model="search"
              class="w-50 m-2"
              placeholder="Please Input"
              :suffix-icon="Search"
          />
        </div>
        <el-button class="button" type="primary" @click="addUsers">添加生猪疾病记录</el-button>
      </div>
    </template>
    <div class="people">
      <el-table :data="allData" style="width: 100%">
        <el-table-column label="疾病产生时间" width="180" align="center">
          <template #default="scope">
            <span style="margin-left: 10px">{{ scope.row.diseaseCreateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="疾病消亡时间" width="180" align="center">
          <template #default="scope">
            <span>{{ scope.row.diseaseExtinctTime }}</span>
          </template>
        </el-table-column>

        <el-table-column >
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
            >
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="demo-pagination-block">
        <el-pagination
            v-model:currentPage="changePage.currentPage"
            v-model:page-size="changePage.pageSize"
            :page-sizes="changePage.pageSizes"
            :small="small"
            :disabled="disabled"
            background
            layout="sizes, prev, pager, next"
            :total="changePage.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </el-card>
  <div>
    <el-dialog v-model="content.dialogVisible" title="生猪疾病记录信息编辑" width="30%" :close-on-click-modal = "false">
      <el-form
          label-width="100px"
          :model="form"
          style="max-width: 350px"
      >

        <el-form-item label="疾病产生时间">
          <el-input v-model="form.diseaseCreateTime"></el-input>
        </el-form-item>
        <el-form-item label="疾病消亡时间">
          <el-input v-model="form.diseaseExtinctTime"></el-input>
        </el-form-item>

      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="content.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="changes"
        >确定</el-button
        >
      </span>
      </template>
    </el-dialog>
  </div>
  <div>
    <el-dialog v-model="content.dialogVisible1" title="生猪疾病记录信息编辑" width="30%" :close-on-click-modal = "false">
      <el-form
          label-width="100px"
          :model="form"
          style="max-width: 350px"
      >
        <el-form-item label="疾病产生时间">
          <el-input v-model="form.diseaseCreateTime"></el-input>
        </el-form-item>

        <el-form-item label="疾病消亡时间">
          <el-input v-model="form.diseaseExtinctTime"></el-input>
        </el-form-item>

      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="content.dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="confirms"
        >确定</el-button
        >
      </span>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import {reactive , computed ,ref} from "vue";
import { Search } from '@element-plus/icons-vue'
import { ElMessageBox ,ElMessage } from 'element-plus';
import qs from "qs";
import {
  deletePigDiseaseRecords, insertPigDiseaseRecords,
  pigDiseaseRecordsNum,
  selectPigDiseaseRecords,
  updatePigDiseaseRecords
} from "@/api/pig/pigDiseaseRecords";
const content = reactive({
  dialogVisible1:false,
  dialogVisible:false
})
const search = ref('')
const form = reactive({
  diseaseCreateTime:'',
  diseaseExtinctTime:'',
  id:''
})
const handleEdit = (index,row) => {
  content.dialogVisible = !content.dialogVisible
  form.diseaseCreateTime=row.diseaseCreateTime
  form.diseaseExtinctTime=row.diseaseExtinctTime
  form.id =row.id
}
const handleDelete = async (index,row) => {
  ElMessageBox.confirm(
      '该操作将会永久删除该条数据,是否继续?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        console.log(row.id)
        console.log(({id:row.id}))

        await deletePigDiseaseRecords({id:row.id}).then(res =>{
          if (res.status===200) {
            pages()
            console.log(res)
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
          }
        })
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已撤销删除',
        })
      })
}
//添加用户
const addUsers = ()=>{
  content.dialogVisible1 = !content.dialogVisible1
  form.diseaseCreateTime=''
  form.diseaseExtinctTime=''
  form.id =''
}
const changePage = reactive({
  currentPage:1,
  pageSizes:[10,20,30,40],
  pageSize:10,
  total:'',
  noticeId:''
})
const changes = async ()=>{

  await updatePigDiseaseRecords(
      qs.stringify(
      {id:form.id,diseaseCreateTime:form.diseaseCreateTime,diseaseExtinctTime:form.diseaseExtinctTime})).then(
      res =>{
        console.log(res)
        if (res.status===200){
          content.dialogVisible = false
          pages()
          ElMessage.success('修改成功')
        }
      }
  )
}


const small = ref(false)
const disabled = ref(false)



pigDiseaseRecordsNum().then(res =>{
  changePage.total = res.data.obj
})

const handleSizeChange= (val) => {
  changePage.pageSize = val
  pages()
}
const handleCurrentChange= (val) => {
  changePage.currentPage = val
  // console.log(`当前页: ${val}`);
  pages()
}
const pages = () => {
  selectPigDiseaseRecords({pageNumber:changePage.currentPage,pageSize: changePage.pageSize}).then(res => {
    console.log(res.data)
    console.log(res.data.obj.records)
    console.log(res.data.obj.records[0])
    tableData.table = res.data.obj.records
  })
}
pages()



let tableData = reactive({
  table:[]
})
//实现模糊搜索
const allData= computed(() =>
    tableData.table.filter(
        (data) =>
            !search.value ||
            data.diseaseCreateTime.toLowerCase().includes(search.value.toLowerCase()) || data.diseaseExtinctTime.toLowerCase().includes(search.value.toLowerCase())
    )
)
const confirms =async ()=>{
  await insertPigDiseaseRecords({diseaseCreateTime:form.diseaseCreateTime,diseaseExtinctTime:form.diseaseExtinctTime}).then(res =>{
    if (res.status === 200) {
      content.dialogVisible1 = false
      //添加标签后重新查询标签
      ElMessage({
        type: 'success',
        message: '添加成功',
      })
    } else if (res.status === 500) {
      ElMessage.error('该类型以存在添加失败')
    }
    console.log(res)
  })
}
</script>

<style lang="less" scoped>
.w-50 {
  width:70% !important;
}
.box-card {
  width: 1248px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .search {
    width: 400px;
  }
}
/deep/.el-table th > .cell {
  text-align: center;
}
/deep/.el-table .cell {
  text-align: center;
}
/deep/ .el-dialog {
  --el-dialog-margin-top: 0vh;
}
</style>
